<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/summernote/summernote.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/summernote/summernote-bs3.css}" rel="stylesheet"/>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-word-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">类型：</label>
            <div class="col-sm-8">
                <input id="type" name="type" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">标签：</label>
            <div class="col-sm-8">
                <input id="label" name="label" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">标题：</label>
            <div class="col-sm-8">
                <input id="title" name="title" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">内容类型：</label>
            <div class="col-sm-8">
                <select id="mode" name="mode" class="form-control">
                    <option value="TEXT">文本</option>
                    <option value="FILE">文件</option>
                    <option value="LINK">连接</option>
                    <option value="HTML">页面</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">内容：</label>
            <div class="col-sm-8">
                <textarea id="content" name="content" class="form-control" rows="3"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">链接：</label>
            <div class="col-sm-8">
                <input id="link" name="link" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">文件路径：</label>
            <div class="col-sm-8">
                <input id="path" name="path" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">页面：</label>
            <div class="col-sm-8">
                <input id="html" name="html" type="hidden">
                <div class="summernote"></div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">顺序：</label>
            <div class="col-sm-8">
                <input id="sort" name="sort" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">是否能删除：</label>
            <div class="col-sm-8">
                <select id="del" name="del" class="form-control">
                    <option value="0">是</option>
                    <option value="1">否</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">禁止修改字段：</label>
            <div class="col-sm-8">
                <input id="permission" name="permission" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <div class="form-control-static col-sm-offset-9">
                <button type="submit" class="btn btn-primary">提交</button>
                <button onclick="$.modal.close()" class="btn btn-danger" type="button">关闭</button>
            </div>
        </div>
    </form>
</div>
<div th:include="include::footer"></div>
<script th:src="@{/ajax/libs/summernote/summernote.min.js}"></script>
<script th:src="@{/ajax/libs/summernote/summernote-zh-CN.js}"></script>
<script type="text/javascript">
    function modeChange(val) {
        var contentParent = $('#content').parents('div.form-group');
        var linkParent = $('#link').parents('div.form-group');
        var pathParent = $('#path').parents('div.form-group');
        var htmlParent = $('#html').parents('div.form-group');
        if (val === 'TEXT') {
            contentParent.css('display', 'block');
            linkParent.css('display', 'none');
            pathParent.css('display', 'none');
            htmlParent.css('display', 'none');
        } else if (val === 'LINK') {
            contentParent.css('display', 'none');
            linkParent.css('display', 'block');
            pathParent.css('display', 'none');
            htmlParent.css('display', 'none');
        } else if (val === 'FILE') {
            contentParent.css('display', 'none');
            linkParent.css('display', 'none');
            pathParent.css('display', 'block');
            htmlParent.css('display', 'none');
        } else if (val === 'HTML') {
            contentParent.css('display', 'none');
            linkParent.css('display', 'none');
            pathParent.css('display', 'none');
            htmlParent.css('display', 'block');
        }
    }

    $(function () {
        $('.summernote').summernote({
            height: '220px',
            lang: 'zh-CN'
        });

        $('#mode').on('change', function () {
            modeChange($(this).val())
        });
        $('select#mode').trigger('change');
    });

    var prefix = ctx + "system/word";
    $("#form-word-add").validate({
        rules: {
            xxxx: {
                required: true,
            }
        },
        submitHandler: function (form) {
            var sHTML = $('.summernote').code();
            $("#html").val(sHTML);
            $.operate.save(prefix + "/add", $('#form-word-add').serialize());
        }
    });
</script>
</body>
</html>
